<template>
  <div class="home">
    <div class="card-container">
      <right-card
        v-for="item in cardData"
        :key="item.id"
        :data="item"
      ></right-card>
    </div>
    <div id="echartBox" class="echart-box"></div>
  </div>
</template>

<script>
//引入组件
import { ordertotaldata } from "@/apis/chartsData.js";
import RightCard from "../RightCard.vue";
// 引入echarts的方法 init
import * as echarts from "echarts";
// console.log(init);

export default {
  //注册组件
  components: {
    RightCard,
  },
  data() {
    return {
      cardData: [
        {
          id: 1,
          iconColor: "orange",
          icon: "icon-order",
          title: "总订单",
          num: 2,
        },
        {
          id: 2,
          iconColor: "deeppink",
          icon: "icon-money",
          title: "总销售额",
          num: 25687,
        },
        {
          id: 3,
          iconColor: "yellow",
          icon: "icon-order2",
          title: "今日订单数",
          num: 78954,
        },
        {
          id: 4,
          iconColor: "gold",
          icon: "icon-money1",
          title: "今日销售额",
          num: 326545,
        },
      ],
    };
  },
  // 生命周期
  mounted() {
    ordertotaldata().then((res) => {
      this.cardData[0].num = res.data.todayOrder;
      this.cardData[1].num = res.data.totalAmount;
      this.cardData[2].num = res.data.totalOrder;
      this.cardData[3].num = res.data.totayAmount;

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("echartBox"));

      // 指定图表的配置项和数据
      myChart.setOption({
        title: {
          text: "折线图堆叠",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["邮件营销", "联盟广告"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数据",
            type: "line",
            data: res.data.orderData,
          },
          {
            name: "销售额",
            type: "line",
            data: res.data.amountData,
          },
        ],
      });
    });
    window.addEventListener("resize", this.handchange);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handchange);
  },
};
</script>

<style lang="less" scoped>
.card-container {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 800px) {
  .card-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .card-container .card {
    width: 45%;
    margin-bottom: 20px;
    margin-right: 0;
  }
}
.echart-box {
  margin-top: 20px;
  width: 100%;
  height: 500px;
  background-color: #fff;
}
</style>